import styled from 'styled-components'
import { format, isToday } from 'date-fns'

import Tag from '../../ui/Tag'
import Table from '../../ui/Table'

import { formatCurrency, formatDistanceFromNow } from '../../utils/helpers'
import { useNavigate } from 'react-router-dom'
import Modal from '../../ui/Modal.jsx'
import Menus from '../../ui/Menus'
import { HiEye, HiTrash } from 'react-icons/hi'
import { HiArrowDownOnSquare, HiArrowUpOnSquare } from 'react-icons/hi2'
import { useCheckout } from '../check-in-out/useCheckout.js'
import ConfirmDelete from '../../ui/ConfirmDelete.jsx'
import { useDeleteBooking } from '../check-in-out/useDeleteBooking.js'

const Cabin = styled.div`
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--color-grey-600);
  font-family: "Sono";
`

const Stacked = styled.div`
  display: flex;
  flex-direction: column;
  gap: 0.2rem;

  & span:first-child {
    font-weight: 500;
  }

  & span:last-child {
    color: var(--color-grey-500);
    font-size: 1.2rem;
  }
`

const Amount = styled.div`
  font-family: "Sono";
  font-weight: 500;
`

function BookingRow({
	booking: {
		id: bookingId,
		created_at,
		startDate,
		endDate,
		numNights,
		numGuests,
		totalPrice,
		status,
		guests: { fullName: guestName, email },
		cabins: { name: cabinName },
	},
}) {
	const { checkout, isCheckingOut } = useCheckout(bookingId)
	const { deleteBooking, isDeleting } = useDeleteBooking(bookingId)
	const statusToTagName = {
		unconfirmed: 'blue',
		'checked-in': 'green',
		'checked-out': 'silver',
	}
	const navigate = useNavigate()

	return (
		<Table.Row>
			<Cabin>{cabinName}</Cabin>

			<Stacked>
				<span>{guestName}</span>
				<span>{email}</span>
			</Stacked>

			<Stacked>
				<span>
					{isToday(new Date(startDate))
						? 'Today'
						: formatDistanceFromNow(startDate)}{' '}
					&rarr; {numNights} night stay
				</span>
				<span>
					{format(new Date(startDate), 'MMM dd yyyy')} &mdash;{' '}
					{format(new Date(endDate), 'MMM dd yyyy')}
				</span>
			</Stacked>

			<Tag type={statusToTagName[status]}>{status.replace('-', ' ')}</Tag>

			<Amount>{formatCurrency(totalPrice)}</Amount>

			<Modal>
				<Menus.Menu>
					<Menus.Toggle id={bookingId} />
					<Menus.List id={bookingId}>
						<Menus.Button
							icon={<HiEye />}
							onClick={() => navigate(`/bookings/${bookingId}`)}
						>
							See Details
						</Menus.Button>

						{status === 'unconfirmed' && (
							<Menus.Button
								icon={<HiArrowDownOnSquare />}
								onClick={() => navigate(`/checkin/${bookingId}`)}
							>
								Check in
							</Menus.Button>
						)}

						{status === 'checked-in' && (
							<Menus.Button
								icon={<HiArrowUpOnSquare />}
								onClick={() => checkout(bookingId)}
								disabled={isCheckingOut}
							>
								Check out
							</Menus.Button>
						)}

						<Modal.Open opens='delete'>
							<Menus.Button icon={<HiTrash />}>Delete booking</Menus.Button>
						</Modal.Open>
					</Menus.List>
				</Menus.Menu>

				<Modal.Window name='delete'>
					<ConfirmDelete
						resourceName='booking'
						disabled={isDeleting}
						onConfirm={() => deleteBooking(bookingId)}
					/>
				</Modal.Window>
			</Modal>
		</Table.Row>
	)
}

export default BookingRow
